<template>
  <view class="detail-view">
    <u-form label-width="140" :model="add_form" ref="uForm">
      <view class="form-model-view">
        <u-form-item required label="选择订单" prop="originNo">
          <u-input
            @click="goPage('/pagesT/order/selOrder')"
            class="dis-input"
            disabled
            v-model="add_form.originNo"
            placeholder="请选择"
          />
          <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon>
        </u-form-item>
        <u-form-item v-if="add_form.originNo" label="退货商铺"
          ><u-input
            class="dis-input"
            disabled
            v-model="add_form.shopName"
            placeholder="请选择"
        /></u-form-item>
        <u-form-item required label="商品清单" label-position="top">
          <view class="goods-view">
            <view class="desc">
              共{{ goods_list.length }}种商品，{{ numTotal }}个
              <!-- <u-icon name="arrow-right" size="24" color="#6c6c6c"></u-icon> -->
            </view>
            <block v-for="(item, index) in goods_list" :key="index">
              <image
                v-if="index <= 4"
                :src="
                  item.images ? item.images[0] : '../../static/img/goods.png'
                "
                mode="aspectFill"
              ></image>
            </block>
            <view class="more-goods" @click="openSelect('sel_pop')"
              ><u-icon name="more-dot-fill" size="36" color="#6c6c6c"></u-icon
            ></view>
          </view>
        </u-form-item>
      </view>
      <view class="form-model-view">
        <u-form-item label="订单备注" label-position="top"
          ><u-input type="textarea" v-model="add_form.remark"
        /></u-form-item>
      </view>
    </u-form>
    <u-popup v-model="sel_pop" mode="bottom">
      <view class="sel-goods-pop">
        <view class="pop-tit clearfix">
          <view class="float_left">本次已选商品</view>
          <!-- <view class="float_right" @click="clearGoods">
						<text class="custom-icon custom-icon-shanchu"></text>
						<text>清空</text>
					</view> -->
        </view>
        <scroll-view class="goods-ul" scroll-y>
          <view
            class="goods-li"
            v-for="(item, index) in goods_list"
            :key="index"
          >
            <view class="goods-name">{{ item.goodsName }}</view>
            <view class="goods-code clearfix">
              <view class="float_left">{{ item.goodsCode }}</view>
              <view class="float_right">
                <view
                  style="
                    width: 200rpx;
                    display: inline-block;
                    border: 1px solid #eeeeee;
                    vertical-align: middle;
                    border-radius: 8rpx;
                    text-align: right;
                    padding: 0 10rpx;
                  "
                >
                  <input
                    style="height: 40rpx; line-height: 40rpx"
                    type="digit"
                    v-model="item.returnUnitPrice"
                  />
                </view>
                元/{{ item.unitName }}
              </view>
            </view>
            <view class="goods-code clearfix">
              <view class="float_left">
                {{ item.unitName }};
                <text v-for="(sku, skuI) in sku.specGroup" :key="skuI"
                  >{{ sku.specValueName }};</text
                >
              </view>
              <view class="float_right"
                ><u-number-box
                  :min="0"
                  :index="index"
                  :value="item.num"
                ></u-number-box
              ></view>
            </view>
            <text
              class="custom-icon custom-icon-shanchu"
              @click="delGoods(index, item)"
            ></text>
          </view>
          <view style="padding-top: 100rpx" v-if="!goods_list.length"
            ><u-empty text="未选择商品" mode="data"></u-empty
          ></view>
        </scroll-view>
      </view>
    </u-popup>
    <view class="detail-bottom"
      ><view class="handel-btn" @click="submit">提交订单</view></view
    >
    <u-modal
      :show-cancel-button="true"
      @confirm="topConfirm"
      v-model="tip_show"
      :content="tip_content"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderout_id: "",
      sel_pop: false,
      tip_show: false,
      tip_content: "",
      goods_list: [],
      delete_array: [],
      orderData: "",
      add_form: {
        originId: "", //销售订单id
        originNo: "", //销售订单no
        shopId: "",
        shopName: "",
        operatorName: "", //制单人
        remark: "", //备注
        details: [],
      },
      rules: {
        originNo: [
          {
            required: true,
            message: "请选择订单",
            // 可以单个或者同时写两个触发验证方式
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    orderData(val) {
      if (val) {
        const allowReturn = val.allowReturn;
        const allowReturnDay = val.allowReturnDay;
        if (allowReturn === 4) {
          this.tip_content = `已经超过${allowReturnDay}天,建议不能退货, 是否确定强制退货?`;
          this.tip_show = true;
          return;
        }
        this.getOrderInfoById(val.userCenterId, val.id);
      }
    },
  },
  computed: {
    userName() {
      return this.$store.state.userInfo.name;
    },
    numTotal() {
      if (!this.goods_list.length) {
        return 0;
      } else if (this.goods_list.length === 1) {
        return Number(this.goods_list[0].num);
      } else {
        let sum = 0;
        this.goods_list.forEach((item) => {
          sum = sum + Number(item.num);
        });
        return sum;
      }
    },
  },

  onLoad(options) {
    if (options.id) {
      this.orderout_id = options.id;
      uni.setNavigationBarTitle({
        title: "编辑退货单",
      });
      this.getOrderOut();
    }
  },
  methods: {
    openSelect(key) {
      this[key] = true;
    },
    topConfirm() {
      this.$u.toast("您已确定强制退货!");
      this.getOrderInfoById(val.userCenterId, val.id);
    },
    //  退货单详情接口
    async getOrderOut() {
      this.$u.api.getOrderOut(this.orderout_id).then((res) => {
        this.add_form = {
          originId: res.data.originId, //销售订单id
          originNo: res.data.no, //销售订单no
          shopId: res.data.shopId,
          shopName: res.data.shopName,
          operatorName: res.data.operatorName, //制单人
          remark: res.data.remark, //备注
          details: [],
        };
        this.goods_list = res.data.details.map((item) => {
          return {
            ...item,
            saleNum: item.extend.saleNum,
          };
        });
      });
    },
    // 获取订单详情
    getOrderInfoById() {
      this.$u.api
        .getOrderInfoById(this.orderData.userCenterId, {
          orderId: this.orderData.id,
        })
        .then((res) => {
          this.orderSelResult(res.data);
        });
    },
    submit() {
      const details = this.goods_list.map((item) => {
        const skuName = this.orderout_id
          ? item.skuName
          : item.specGroup
              .map((itemM) => {
                return itemM.specValueName;
              })
              .join("_");
        return {
          id: item.id,
          goodsId: item.goodsId,
          goodsCode: item.goodsCode,
          goodsName: item.goodsName,
          goodsBasicId: item.goodsBasicId,
          skuId: item.skuId,
          skuName: skuName,
          unitName: item.unitName,
          num: item.num,
          saleNum: item.saleNum,
          saleUnitPrice: item.saleUnitPrice, // 销售单价
          returnUnitPrice: item.returnUnitPrice, // 退货单价
          returnTotalPrice: item.returnUnitPrice * item.num, // 退货总价
          saleTotalPrice: item.saleUnitPrice * item.saleNum, // 销售总价
        };
      });
      const params = {
        ...this.add_form,
        deleteArray: this.delete_array,
        operatorName: this.userName,
        details: details,
      };
      this.$refs.uForm.validate((valid) => {
        if (!details.length) {
          this.$u.toast("无退货商品");
          return;
        }
        if (valid) {
          if (this.orderout_id) {
            this.$u.api
              .updateOrderReturn(this.orderout_id, params)
              .then((res) => {
                this.$u.toast("操作成功");
                setTimeout(() => {
                  uni.navigateBack();
                }, 1500);
              });
          } else {
            this.$u.api.addOrderOut(params).then((res) => {
              this.$u.toast("操作成功");
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            });
          }
        }
      });
    },
    delGoods(index, row) {
      if (this.goods_list.length === 1) {
        this.$u.toast("至少保留一条");
        return;
      }
      if (this.delete_array.indexOf(row.id) === -1) {
        this.delete_array.push(row.id);
      }
      this.goods_list.splice(index, 1);
    },
    orderSelResult(row) {
      this.add_form.originId = row.id;
      this.add_form.originNo = row.no;
      this.userCenterId = row.userCenterId;
      // 订单状态 orderStatus
      this.orderStatus = row.orderStatus;
      this.add_form.shopId = row.shopId;
      this.add_form.shopName = row.shopName;
      this.goods_list = row.goodsData.map((item) => {
        return {
          images: item.images,
          id: item.id,
          goodsId: item.goodsId,
          goodsName: item.goodsName,
          goodsCode: item.goodsCode,
          goodsBasicId: item.goodsBasicId,
          skuId: item.skuId,
          unitName: item.unitName,
          specGroup: item.specGroup,
          num: item.buyNum,
          saleNum: item.buyNum,
          saleUnitPrice: item.price, // 销售单价
          returnUnitPrice: item.returnPrice, // 退货单价
          returnTotalPrice: item.price * item.buyNum, // 退货总价
          saleTotalPrice: item.price * item.buyNum, // 销售总价
        };
      });
    },
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
};
</script>

<style lang="scss" scoped>
.form-model-view {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  padding: 0 20rpx;
  text-align: right;
  .goods-view {
    text-align: left;
    position: relative;
    .desc {
      font-size: 24rpx;
      color: #6c6c6c;
      position: absolute;
      right: 0;
      top: -80rpx;
    }
    image {
      width: 102rpx;
      height: 102rpx;
      border-radius: 8rpx;
      margin: 0 6rpx;
      vertical-align: middle;
    }
    .more-goods {
      width: 102rpx;
      height: 102rpx;
      border-radius: 8rpx;
      margin: 0 6rpx;
      display: inline-block;
      background-color: #eeeeee;
      line-height: 102rpx;
      text-align: center;
      vertical-align: middle;
    }
  }
  .sel-goods-view {
    text-align: center;
    display: flex;
    .sel-li {
      line-height: 32rpx;
      flex: 2;
      .icon {
        margin-bottom: 16rpx;
        .custom-icon {
          font-size: 46rpx;
          color: $uni-color-primary;
        }
      }
    }
  }
}
.sel-goods-pop {
  padding-bottom: 1px;
  .pop-tit {
    line-height: 70rpx;
    background-color: #f5f5f5;
    padding: 0 24rpx;
    .float_right {
      font-size: 24rpx;
      color: #666666;
      .custom-icon-shanchu {
        font-size: 26rpx;
        margin-right: 10rpx;
      }
    }
  }
  .goods-ul {
    min-height: 400rpx;
    max-height: 600rpx;
    .goods-li {
      padding: 24rpx;
      position: relative;
      border-bottom: 1px solid #f5f5f5;
      .goods-name {
        width: 660rpx;
      }
      .goods-code {
        padding-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .custom-icon-shanchu {
        position: absolute;
        right: 24rpx;
        top: 24rpx;
        width: 40rpx;
        height: 40rpx;
        color: $uni-color-error;
      }
    }
  }
  .btn-view {
    width: 680rpx;
    height: 70rpx;
    line-height: 70rpx;
    border-radius: 10rpx;
    background-color: $uni-color-primary;
    color: #ffffff;
    text-align: center;
    margin: 20rpx auto;
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
